<template>
    <div class="header" :id='flg ? "src" : ""'>
        <div class="menu"><i class="fa fa-bars" aria-hidden="true"></i></div>
        <div class="search">
            <img class="lo" src="../assets/images/logo/jd-logo.png" alt="">
            <img class="fa" src="../assets/images/fangdajing.png" alt="">
            <input type="text" placeholder=" switch">
        </div>
        <div v-if='!$store.state.loginFig'  @click="onLogin" class="login">登录</div>

    </div>
</template>

<script>
export default {
    data:function(){
        return{
            flg:false
        }
    },
    created:function(){
        // console.log(this)
        window.addEventListener('scroll',() => {
            // console.log(this)
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
            // console.log(scrollTop)
            if(scrollTop > 20){
                this.flg = true
            } else {
                this.flg = false
            }
        })
    },
    methods:{
        onLogin(){
            this.$router.push('/login')
        }
    }
}
</script>

<style lang="less" scoped>
    .header{
        width: 100%;
        height: 44px;
        background: #C82519;
        display: flex;
        padding: 7px;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        z-index: 9;

        .menu,.login{
            width: 40px;
            color: white;
            font-size:14px;
            margin-top:4px;
        }
        .menu i{
            font-size: 20px;
        }
        .search{
            width: 100%;
            height: 30px;
            border-radius: 15px;
            flex: 1;
            background: white;
            position: relative; 
            overflow: hidden;
            position: relative;
            
            .lo{
                position:absolute;
                width: 20px;
                height: 15px;
                left: 15px;
                top: 8px;
                padding-right: 8px;
                border-right: 1px solid #cccccc;
            }
            .fa{
                width: 18px;
                height: 18px;
                position: absolute;
                top: 7px;
                left: 50px;
            }
            input{
                width: 100%;
                position: absolute;
                outline: none;
                border:none;
                left: 60px;
                width: 195px;
                height: 30px;
                font-size: 12px;
                color: #232326;
                padding-left: 10px;
                margin: 0 0 0 5px;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 30px;
            }
        }
 
    }
    #src{
        background: rgb(228, 49, 48);
    }


</style>